<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.61">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/icon.png"><title>REST风格和Ajax | FYJ</title><meta name="description" content="Just playing around">
    <link rel="modulepreload" href="/assets/app-5e55c3a9.js"><link rel="modulepreload" href="/assets/framework-9675d465.js"><link rel="modulepreload" href="/assets/RESTheAJAX.html-17e205d8.js"><link rel="modulepreload" href="/assets/RESTheAJAX.html-174a11fd.js"><link rel="prefetch" href="/assets/index.html-6d5e9dd3.js" as="script"><link rel="prefetch" href="/assets/index.html-3d8b60b2.js" as="script"><link rel="prefetch" href="/assets/index.html-a7cfb774.js" as="script"><link rel="prefetch" href="/assets/index.html-1a66ce3d.js" as="script"><link rel="prefetch" href="/assets/index.html-a2322c32.js" as="script"><link rel="prefetch" href="/assets/index.html-2b8e88d2.js" as="script"><link rel="prefetch" href="/assets/index.html-36817084.js" as="script"><link rel="prefetch" href="/assets/index.html-c05495db.js" as="script"><link rel="prefetch" href="/assets/index.html-3cf0f594.js" as="script"><link rel="prefetch" href="/assets/index.html-33a8693c.js" as="script"><link rel="prefetch" href="/assets/index.html-80880afd.js" as="script"><link rel="prefetch" href="/assets/index.html-df5b0273.js" as="script"><link rel="prefetch" href="/assets/index.html-d608509e.js" as="script"><link rel="prefetch" href="/assets/index.html-ac9bff28.js" as="script"><link rel="prefetch" href="/assets/index.html-d251d55d.js" as="script"><link rel="prefetch" href="/assets/index.html-d299a2c9.js" as="script"><link rel="prefetch" href="/assets/index.html-c8596e07.js" as="script"><link rel="prefetch" href="/assets/index.html-ce42ac51.js" as="script"><link rel="prefetch" href="/assets/index.html-e1e2c2da.js" as="script"><link rel="prefetch" href="/assets/index.html-49c6b4a8.js" as="script"><link rel="prefetch" href="/assets/index.html-3880c1f3.js" as="script"><link rel="prefetch" href="/assets/index.html-b5b12757.js" as="script"><link rel="prefetch" href="/assets/index.html-6cf06f14.js" as="script"><link rel="prefetch" href="/assets/index.html-1a88d37b.js" as="script"><link rel="prefetch" href="/assets/index.html-c8e98ed0.js" as="script"><link rel="prefetch" href="/assets/index.html-d7cf9c00.js" as="script"><link rel="prefetch" href="/assets/git.html-0da1c675.js" as="script"><link rel="prefetch" href="/assets/html5meitiyuansu.html-4654ddc1.js" as="script"><link rel="prefetch" href="/assets/duoliebuju.html-54f235b4.js" as="script"><link rel="prefetch" href="/assets/DOM__BOM.html-b97d346f.js" as="script"><link rel="prefetch" href="/assets/jsbiji.html-a3fbc3f8.js" as="script"><link rel="prefetch" href="/assets/jsbiji2.html-6c330c31.js" as="script"><link rel="prefetch" href="/assets/shuxingmiaoshufu.html-08b53360.js" as="script"><link rel="prefetch" href="/assets/liulanqixuanranyuanli.html-3208ecf3.js" as="script"><link rel="prefetch" href="/assets/zhonghuievent-loop.html-7baa2b76.js" as="script"><link rel="prefetch" href="/assets/mongodb.html-ad7d95ea.js" as="script"><link rel="prefetch" href="/assets/mongoose.html-31658686.js" as="script"><link rel="prefetch" href="/assets/express.html-042999ef.js" as="script"><link rel="prefetch" href="/assets/httpxieyi.html-abaf3902.js" as="script"><link rel="prefetch" href="/assets/httpmokuai.html-9408a820.js" as="script"><link rel="prefetch" href="/assets/nodejs.html-8df1574a.js" as="script"><link rel="prefetch" href="/assets/nodejshexinmokuai.html-72c9480b.js" as="script"><link rel="prefetch" href="/assets/promise.html-85e3fffc.js" as="script"><link rel="prefetch" href="/assets/webpackhevite.html-a09bf01e.js" as="script"><link rel="prefetch" href="/assets/huihuakongzhi.html-86d8c25d.js" as="script"><link rel="prefetch" href="/assets/baoguanliqi.html-86b29b9f.js" as="script"><link rel="prefetch" href="/assets/mokuaihua.html-67d4835d.js" as="script"><link rel="prefetch" href="/assets/fangdaolian.html-932412c5.js" as="script"><link rel="prefetch" href="/assets/typescript.html-0bd71496.js" as="script"><link rel="prefetch" href="/assets/vue-router3.html-09f47896.js" as="script"><link rel="prefetch" href="/assets/vue2(2).html-10c04317.js" as="script"><link rel="prefetch" href="/assets/vue2.html-82b6d2df.js" as="script"><link rel="prefetch" href="/assets/vue2zujiantongxin.html-56d49820.js" as="script"><link rel="prefetch" href="/assets/vueRouter3lanjiazaishiyongdewenti.html-3ffca1f7.js" as="script"><link rel="prefetch" href="/assets/Vuex3.html-e24f4da6.js" as="script"><link rel="prefetch" href="/assets/api.html-b73a9946.js" as="script"><link rel="prefetch" href="/assets/home.html-746a4c0d.js" as="script"><link rel="prefetch" href="/assets/plugin.html-6a7b36ed.js" as="script"><link rel="prefetch" href="/assets/theme.html-6037defd.js" as="script"><link rel="prefetch" href="/assets/121501.html-8973c891.js" as="script"><link rel="prefetch" href="/assets/404.html-60b35caa.js" as="script"><link rel="prefetch" href="/assets/index.html-101169bd.js" as="script"><link rel="prefetch" href="/assets/index.html-c05f203a.js" as="script"><link rel="prefetch" href="/assets/index.html-0c6bc7be.js" as="script"><link rel="prefetch" href="/assets/index.html-0fe42912.js" as="script"><link rel="prefetch" href="/assets/index.html-35698f58.js" as="script"><link rel="prefetch" href="/assets/index.html-a9998c9a.js" as="script"><link rel="prefetch" href="/assets/index.html-e03acce1.js" as="script"><link rel="prefetch" href="/assets/index.html-936bfd18.js" as="script"><link rel="prefetch" href="/assets/index.html-3b167d99.js" as="script"><link rel="prefetch" href="/assets/index.html-6a7e33f2.js" as="script"><link rel="prefetch" href="/assets/index.html-00dc6c81.js" as="script"><link rel="prefetch" href="/assets/index.html-c386c5b9.js" as="script"><link rel="prefetch" href="/assets/index.html-62cab89d.js" as="script"><link rel="prefetch" href="/assets/index.html-c6f54c68.js" as="script"><link rel="prefetch" href="/assets/index.html-5fc54677.js" as="script"><link rel="prefetch" href="/assets/index.html-96867bd4.js" as="script"><link rel="prefetch" href="/assets/index.html-452a2070.js" as="script"><link rel="prefetch" href="/assets/index.html-500c2666.js" as="script"><link rel="prefetch" href="/assets/index.html-d797d831.js" as="script"><link rel="prefetch" href="/assets/index.html-84073cb9.js" as="script"><link rel="prefetch" href="/assets/index.html-8dfee4a9.js" as="script"><link rel="prefetch" href="/assets/index.html-a675820e.js" as="script"><link rel="prefetch" href="/assets/index.html-948f048e.js" as="script"><link rel="prefetch" href="/assets/index.html-522daa8a.js" as="script"><link rel="prefetch" href="/assets/index.html-4d67ded2.js" as="script"><link rel="prefetch" href="/assets/index.html-8caf183d.js" as="script"><link rel="prefetch" href="/assets/git.html-9cef5060.js" as="script"><link rel="prefetch" href="/assets/html5meitiyuansu.html-cd096af4.js" as="script"><link rel="prefetch" href="/assets/duoliebuju.html-4e591000.js" as="script"><link rel="prefetch" href="/assets/DOM__BOM.html-518d085e.js" as="script"><link rel="prefetch" href="/assets/jsbiji.html-f1c6b5c4.js" as="script"><link rel="prefetch" href="/assets/jsbiji2.html-0ce3d86b.js" as="script"><link rel="prefetch" href="/assets/shuxingmiaoshufu.html-12f7f1aa.js" as="script"><link rel="prefetch" href="/assets/liulanqixuanranyuanli.html-e15be5a7.js" as="script"><link rel="prefetch" href="/assets/zhonghuievent-loop.html-993374db.js" as="script"><link rel="prefetch" href="/assets/mongodb.html-06aa4d45.js" as="script"><link rel="prefetch" href="/assets/mongoose.html-f6a2c1e1.js" as="script"><link rel="prefetch" href="/assets/express.html-c34de6a8.js" as="script"><link rel="prefetch" href="/assets/httpxieyi.html-393ba2a3.js" as="script"><link rel="prefetch" href="/assets/httpmokuai.html-84b55eda.js" as="script"><link rel="prefetch" href="/assets/nodejs.html-2ee518f3.js" as="script"><link rel="prefetch" href="/assets/nodejshexinmokuai.html-fabb53b0.js" as="script"><link rel="prefetch" href="/assets/promise.html-34216aec.js" as="script"><link rel="prefetch" href="/assets/webpackhevite.html-aac8da2d.js" as="script"><link rel="prefetch" href="/assets/huihuakongzhi.html-1540a73e.js" as="script"><link rel="prefetch" href="/assets/baoguanliqi.html-d4dece61.js" as="script"><link rel="prefetch" href="/assets/mokuaihua.html-2cfeca4a.js" as="script"><link rel="prefetch" href="/assets/fangdaolian.html-4c95566c.js" as="script"><link rel="prefetch" href="/assets/typescript.html-3e2bf303.js" as="script"><link rel="prefetch" href="/assets/vue-router3.html-fa748c7b.js" as="script"><link rel="prefetch" href="/assets/vue2(2).html-b4107b02.js" as="script"><link rel="prefetch" href="/assets/vue2.html-dfda70b7.js" as="script"><link rel="prefetch" href="/assets/vue2zujiantongxin.html-4cf781c8.js" as="script"><link rel="prefetch" href="/assets/vueRouter3lanjiazaishiyongdewenti.html-a5f191aa.js" as="script"><link rel="prefetch" href="/assets/Vuex3.html-68ef32c1.js" as="script"><link rel="prefetch" href="/assets/api.html-710c8c92.js" as="script"><link rel="prefetch" href="/assets/home.html-b45de374.js" as="script"><link rel="prefetch" href="/assets/plugin.html-2075a048.js" as="script"><link rel="prefetch" href="/assets/theme.html-5b5f0e80.js" as="script"><link rel="prefetch" href="/assets/121501.html-865346dc.js" as="script"><link rel="prefetch" href="/assets/404.html-eab7b035.js" as="script"><link rel="prefetch" href="/assets/reco-valine-a0c1af1f.js" as="script">
    <link rel="preload" href="/assets/style-887583e0.css" as="style"><link rel="stylesheet" href="/assets/style-887583e0.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper series--no show-catalog"><div><header class="navbar-container"><!--[--><div class="site-brand nav-item"><img class="logo" src="/logo.png" alt="FYJ"><a href="/" class="site-name can-hide">FYJ</a></div><div class="nav-item navbar-links-wrapper" style=""><div><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div><nav class="navbar-links"><!--[--><div class="navbar-links__item"><a href="/" class="link router-link-active" aria-label="Home"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Home<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/categories/html-note/1/" class="link" aria-label="分类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->分类<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/tags/html5/1/" class="link" aria-label="标签"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->标签<!--]--></span></span><!--[--><!--]--></a></div><!--]--></nav><span class="xicon-container btn-toggle-dark-mode btn--dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M15 2h2v3h-2z" fill="currentColor"></path><path d="M27 15h3v2h-3z" fill="currentColor"></path><path d="M15 27h2v3h-2z" fill="currentColor"></path><path d="M2 15h3v2H2z" fill="currentColor"></path><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor"></path><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor"></path><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor"></path><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor"></path><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor"></path></svg></span><span class="xicon-container btn-toggle-menus"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><circle cx="16" cy="8" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="24" r="2" fill="currentColor"></circle></svg></span></div><!--]--></header><div class="mobile-menus-container"><nav class="navbar-links mobile"><!--[--><div class="navbar-links__item"><a href="/" class="link router-link-active" aria-label="Home"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Home<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/categories/html-note/1/" class="link" aria-label="分类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->分类<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/tags/html5/1/" class="link" aria-label="标签"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->标签<!--]--></span></span><!--[--><!--]--></a></div><!--]--></nav><div class="appearance"><span>Appearance</span><span class="xicon-container btn-toggle-dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M15 2h2v3h-2z" fill="currentColor"></path><path d="M27 15h3v2h-3z" fill="currentColor"></path><path d="M15 27h2v3h-2z" fill="currentColor"></path><path d="M2 15h3v2H2z" fill="currentColor"></path><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor"></path><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor"></path><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor"></path><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor"></path><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor"></path></svg></span></div></div><div class="series-mask"></div><aside class="series-container"><div class="site-brand"><img class="logo" src="/logo.png" alt="FYJ"><a href="/" class="site-name can-hide">FYJ</a></div><!--[--><!--]--></aside><!--[--><main class="page-container"><h1 class="page-title">REST风格和Ajax</h1><div class="page-info"><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M16 4a5 5 0 1 1-5 5a5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7a7 7 0 0 0-7-7z" fill="currentColor"></path><path d="M26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->fyj<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2023/05/22<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M11.17 6l3.42 3.41l.58.59H28v16H4V6h7.17m0-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H16l-3.41-3.41A2 2 0 0 0 11.17 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->javascript-note<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M10 14a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4zm0-6a2 2 0 1 0 1.998 2.004A2.002 2.002 0 0 0 10 8z" fill="currentColor"></path><path d="M16.644 29.415L2.586 15.354A2 2 0 0 1 2 13.941V4a2 2 0 0 1 2-2h9.941a2 2 0 0 1 1.414.586l14.06 14.058a2 2 0 0 1 0 2.828l-9.943 9.943a2 2 0 0 1-2.829 0zM4 4v9.942L18.058 28L28 18.058L13.942 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->ajax<!--]--></span></span><!----></div><div class="theme-reco-default-content"><div><h2 id="_1-为什么使用rest风格" tabindex="-1"><a class="header-anchor" href="#_1-为什么使用rest风格" aria-hidden="true">#</a> 1.为什么使用REST风格</h2><p>我们之前编写的服务器都是传统的服务器，服务器的结构是基于<strong>MVC</strong>模式：</p><ul><li><code>Model</code> -- 数据模型</li><li><code>View</code> -- 视图，用来呈现数据</li><li><code>Controller</code> -- 控制器，复杂加载数据并选择视图来呈现数据</li></ul><p>传统的服务器是直接为客户端返回一个页面，但是传统的服务器并不能适用于现在的应用场景。</p><p>现在的应用场景，一个应用通常都会有多个客户端（client）存在：<strong>web端 移动端（app） pc端</strong> 。</p><p>如果服务器直接返回html页面，那么服务器就只能为web端提供服务，其他类型的客户端还需要单独开发服务器，这样就提高了开发和维护的成本。</p><p><strong>如何解决这个问题？</strong></p><ul><li>传统的服务器需要做两件事情，第一个加载数据，第二个要将模型渲染进视图。</li><li>解决方案就将渲染视图的功能从服务器中剥离出来，服务器只负责向客户端返回数据，渲染视图的工作由客户端自行完成。 分离以后，服务器只提供数据，一个服务器可以同时为多种客户端提供服务器，同时将视图渲染的工作交给客户端以后，简化 了服务器代码的编写。</li></ul><h3 id="_1-rest" tabindex="-1"><a class="header-anchor" href="#_1-rest" aria-hidden="true">#</a> 1.REST</h3><blockquote><p>REpresentational State Transfer ：表示层状态的传输。省略了Resource，全称：Resource REpresentational State Transfer</p></blockquote><p><code>Rest</code>实际上就是一种服务器的设计风格。它的主要<strong>特点</strong>就是，服务器只返回数据，服务器和客户端传输数据时通常会使用<strong>JSON</strong>作为数据格式。<strong>（也就是调用接口来获取数据）</strong> 请求的方法：</p><ul><li><code>GET</code> 加载数据</li><li><code>POST</code> 新建或添加数据</li><li><code>PUT</code> 添加或修改数据</li><li><code>PATCH</code> 修改数据</li><li><code>DELETE</code> 删除数据</li><li><code>OPTION</code> 由浏览器自动发送，检查请求的一些权限</li></ul><p>API（接口） Endpoint（端点） GET /user POST /user DELETE /user/:id ...</p><h3 id="_2-接口是什么" tabindex="-1"><a class="header-anchor" href="#_2-接口是什么" aria-hidden="true">#</a> 2.接口是什么</h3><ul><li>接口是 前后端通信的桥梁</li><li>简单理解：一个接口就是 服务中的一个路由规则 ，根据请求响应结果</li><li>接口的英文单词是 API (Application Program Interface)，所以有时也称之为 API 接口</li><li>这里的接口指的是数据接口，而不是java等其他编程语言里的接口。</li><li>作用：实现前后端的通信</li></ul><h3 id="_3-接口的组成" tabindex="-1"><a class="header-anchor" href="#_3-接口的组成" aria-hidden="true">#</a> 3.接口的组成</h3><ol><li>请求方法</li><li>接口地址（URL）</li><li>请求参数</li><li>响应结果</li></ol><p><a href="https://www.free-api.com/doc/597" target="_blank" rel="noopener noreferrer">接口实例<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h3 id="_4-restful-api" tabindex="-1"><a class="header-anchor" href="#_4-restful-api" aria-hidden="true">#</a> 4.RESTful API</h3><p>RESTful API 是一种特殊风格的接口，主要特点有如下几个：</p><ul><li>URL 中的路径表示 资源 ，路径中不能有 动词 ，例如 create , delete , update 等这些都不能有。</li><li>操作资源要与 HTTP 请求方法 对应。</li><li>操作结果要与 HTTP 响应状态码 对应。</li></ul><table><thead><tr><th style="text-align:left;"><div style="width:200;">操作</div></th><th style="text-align:left;">请求类型</th><th><div style="width:50;">URL</div></th></tr></thead><tbody><tr><td style="text-align:left;">新增一首歌曲</td><td style="text-align:left;">POST</td><td>/song</td></tr><tr><td style="text-align:left;">删除一首歌曲</td><td style="text-align:left;">DELETE</td><td>/song/ID</td></tr><tr><td style="text-align:left;">修改一首歌曲 （前端提供该歌曲的全部信息）</td><td style="text-align:left;">PUT</td><td>/song/ID</td></tr><tr><td style="text-align:left;">修改歌曲 （提供该歌曲改动部分的信息）</td><td style="text-align:left;">PATCH</td><td>/song/ID</td></tr><tr><td style="text-align:left;">获取所有歌曲</td><td style="text-align:left;">GET</td><td>/song</td></tr><tr><td style="text-align:left;">获取单个歌曲</td><td style="text-align:left;">GET</td><td>/song/ID</td></tr></tbody></table><h3 id="_5-json-server" tabindex="-1"><a class="header-anchor" href="#_5-json-server" aria-hidden="true">#</a> 5.json-server</h3><p>json-server 本身是一个 JS 编写的工具包，可以快速搭建 RESTful API 服务。</p><p>官方地址: https://github.com/typicode/json-server</p><p><strong>postman</strong></p><ul><li>这是一个软件，通过它可以帮助向服务器发送各种请求，帮助我们测试API</li></ul><h2 id="_2-ajax" tabindex="-1"><a class="header-anchor" href="#_2-ajax" aria-hidden="true">#</a> 2.AJAX</h2><blockquote><p>A 异步 J JavaScript And X xml （Asynchronous JavaScript And XML）异步的js和xml</p><p>AJAX 就是指通过js向服务器发送请求来加载数据。</p></blockquote><p>xml是早期AJAX使用的数据格式 <code>&lt;student&gt;</code><code>&lt;name&gt;&lt;/name&gt;</code><code>&lt;/student&gt;</code> 目前数据格式都使用json {&quot;name&quot;:&quot;孙悟空&quot;}</p><p>可以选择的方案（AJAX发送）：</p><ol><li>XMLHTTPRequest（xhr）</li><li>Fetch</li><li>Axios（封装xhr）</li><li>umi-request（封装fetch）</li></ol><h3 id="_1-cors" tabindex="-1"><a class="header-anchor" href="#_1-cors" aria-hidden="true">#</a> 1.CORS（）</h3><blockquote><p>CORS（Cross-Origin Resource Sharing，跨域资源共享）<a href="http://www.yuanjin.tech/article/99" target="_blank" rel="noopener noreferrer">CORS详解<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p></blockquote><p>跨域请求：</p><ul><li>如果两个网站的完整域名不相同 a网站：http://haha.com b网站：http://heihei.com</li><li>跨域需要检查三个东西： 协议 域名 端口号 三个只要有一个不同，就算跨域</li><li>当我们通过AJAX去发送跨域请求时，浏览器为了服务器的安全，会阻止js读取到服务器的数据</li></ul><p>解决方案：</p><p>在服务器中设置一个允许跨域的头：<strong>Access-Control-Allow-Origin</strong> 允许那些客户端访问我们的服务器</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> 
    <span class="token comment">// 设置响应头</span>
    res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">&quot;Access-Control-Allow-Origin&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;*&quot;</span><span class="token punctuation">)</span>    
    res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">&quot;Access-Control-Allow-Methods&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;GET,POST&quot;</span><span class="token punctuation">)</span>
    res<span class="token punctuation">.</span><span class="token function">setHeader</span><span class="token punctuation">(</span><span class="token string">&quot;Access-Control-Allow-Headers&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Content-type&quot;</span><span class="token punctuation">)</span>
    <span class="token comment">// Access-Control-Allow-Origin 设置指定值时只能设置一个</span>
    <span class="token comment">// res.setHeader(&quot;Access-Control-Allow-Origin&quot;, &quot;http://127.0.0.1:5500&quot;)</span>
    <span class="token comment">// Access-Control-Allow-Methods 允许的请求的方式</span>
    <span class="token comment">// Access-Control-Allow-Headers 允许传递的请求头</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-xhr的使用" tabindex="-1"><a class="header-anchor" href="#_2-xhr的使用" aria-hidden="true">#</a> 2.xhr的使用</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 创建xhr对象</span>
<span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// 设置请求信息</span>
xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">&quot;get&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;http://localhost:3000/students&quot;</span><span class="token punctuation">)</span>
<span class="token comment">// 发送请求</span>
xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// 设置响应体的类型，设置后会自动对数据进行类型转换</span>
xhr<span class="token punctuation">.</span>responseType <span class="token operator">=</span> <span class="token string">&quot;json&quot;</span>
<span class="token comment">// 读取响应</span>
<span class="token comment">// 因为是异步的，发完请求不能立即读取数据，</span>
<span class="token comment">// 因此可以为xhr对象绑定一个load事件，请求完成的时候会触发load 事件</span>
xhr<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// xhr.status表示响应状态码</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// xhr.response 表示响应信息</span>
        <span class="token comment">// const result = JSON.parse(xhr.response)</span>
        <span class="token comment">// 读取响应信息</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>response<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_3-fetch的使用" tabindex="-1"><a class="header-anchor" href="#_3-fetch的使用" aria-hidden="true">#</a> 3.fetch的使用</h3><blockquote><p>fetch是xhr的升级版，采用的是<code>Promise API</code> 作用和AJAX是一样的，但是使用起来更加友好 fetch原生js就支持的一种ajax请求的方式</p></blockquote><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>AJAX测试<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点我加载数据<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点我加载数据2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>root<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
        <span class="token keyword">const</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn&quot;</span><span class="token punctuation">)</span>
	<span class="token keyword">const</span> btn2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn2&quot;</span><span class="token punctuation">)</span>
        <span class="token keyword">const</span> root <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;root&quot;</span><span class="token punctuation">)</span>
        <span class="token keyword">const</span> btn2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn2&quot;</span><span class="token punctuation">)</span>

        btn2<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">&quot;http://localhost:3000/students&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&quot;post&quot;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                    <span class="token comment">//application/x-www-form-urlencoded  表单数据</span>
                    <span class="token string-property property">&quot;Content-type&quot;</span><span class="token operator">:</span><span class="token string">&quot;application/json&quot;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token comment">// 通过body去发送数据时，必须通过请求头来指定数据的类型</span>
                <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;白骨精&quot;</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&quot;女&quot;</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">&quot;白骨洞&quot;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>


        btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token comment">/* 
                fetch
                    - fetch是xhr的升级版，采用的是Promise API
                    - 作用和AJAX是一样的，但是使用起来更加友好
                    - fetch原生js就支持的一种ajax请求的方式
            */</span>
            <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">&quot;http://localhost:3000/students&quot;</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                        <span class="token comment">// res.json() 可以用来读取json格式的数据</span>
                        <span class="token keyword">return</span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
                    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&quot;请求加载失败&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    <span class="token comment">// 获取到数据后，将数据渲染到页面中</span>
                    <span class="token comment">// console.log(res.data)</span>
                    <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token string">&quot;ok&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                        <span class="token keyword">const</span> data <span class="token operator">=</span> res<span class="token punctuation">.</span>data
                        <span class="token keyword">const</span> table <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;table&quot;</span><span class="token punctuation">)</span>
                        root<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>table<span class="token punctuation">)</span>
                        table<span class="token punctuation">.</span><span class="token function">insertAdjacentHTML</span><span class="token punctuation">(</span><span class="token string">&quot;beforeend&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;&lt;caption&gt;学生列表&lt;/caption&gt;&quot;</span><span class="token punctuation">)</span>
                        table<span class="token punctuation">.</span><span class="token function">insertAdjacentHTML</span><span class="token punctuation">(</span><span class="token string">&quot;beforeend&quot;</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
                            &lt;thead&gt;
                                &lt;tr&gt;
                                    &lt;th&gt;学号&lt;/th&gt;
                                    &lt;th&gt;姓名&lt;/th&gt;
                                    &lt;th&gt;年龄&lt;/th&gt;
                                    &lt;th&gt;性别&lt;/th&gt;
                                    &lt;th&gt;地址&lt;/th&gt;
                                &lt;/tr&gt;
                            &lt;/thead&gt;
                        </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>

                        <span class="token keyword">const</span> tbody <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;tbody&quot;</span><span class="token punctuation">)</span>
                        table<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>tbody<span class="token punctuation">)</span>
                        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> stu <span class="token keyword">of</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                            tbody<span class="token punctuation">.</span><span class="token function">insertAdjacentHTML</span><span class="token punctuation">(</span><span class="token string">&quot;beforeend&quot;</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
                                &lt;tr&gt;
                                    &lt;td&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>stu<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/td&gt;
                                    &lt;td&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>stu<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/td&gt;
                                    &lt;td&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>stu<span class="token punctuation">.</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/td&gt;
                                    &lt;td&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>stu<span class="token punctuation">.</span>gender<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/td&gt;
                                    &lt;td&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>stu<span class="token punctuation">.</span>address<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/td&gt;
                                &lt;/tr&gt;
                        </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;出错了！&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>中断请求</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        <span class="token keyword">let</span> controller
        btn01<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token comment">// 创建一个AbortController</span>
            controller <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AbortController</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token comment">// 终止请求</span>
            <span class="token comment">// setTimeout(() =&gt; { controller.abort() }, 3000)</span>
            <span class="token comment">// 点击向test发送请求</span>
            <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">&quot;http://localhost:3000/test&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">signal</span><span class="token operator">:</span> controller<span class="token punctuation">.</span>signal
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;出错了&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>

        btn02<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            controller <span class="token operator">&amp;&amp;</span> controller<span class="token punctuation">.</span><span class="token function">abort</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>将fetch改写为await版本</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code> btn03<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token comment">// fetch(&quot;http://localhost:3000/test&quot;).then()...</span>
            <span class="token comment">// 注意：将promise改写为await时，一定要改写try-catch</span>
            <span class="token keyword">try</span> <span class="token punctuation">{</span>
                <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">&quot;http://localhost:3000/students&quot;</span><span class="token punctuation">)</span>
                <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">await</span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
            <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span> 
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;出错了&quot;</span><span class="token punctuation">,</span>err<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_3-本地存储" tabindex="-1"><a class="header-anchor" href="#_3-本地存储" aria-hidden="true">#</a> 3.本地存储</h2><blockquote><p>所谓的本地存储就是指浏览器自身的存储空间， 可以将用户的数据存储到浏览器内部</p></blockquote><ol><li><strong>sessionStorage 中存储的数据 页面一关闭就会丢失</strong></li><li><strong>localStorage 存储的时间比较长</strong></li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// console.log(sessionStorage)</span>

            <span class="token comment">// setItem() 用来存储数据</span>
            <span class="token comment">// getItem() 用来获取数据</span>
            <span class="token comment">// removeItem() 删除数据</span>
            <span class="token comment">// clear() 清空数据</span>
            <span class="token comment">// sessionStorage.setItem(&quot;name&quot;, &quot;孙悟空&quot;)</span>
            <span class="token comment">// sessionStorage.setItem(&quot;age&quot;, &quot;18&quot;)</span>
            <span class="token comment">// sessionStorage.setItem(&quot;gender&quot;, &quot;男&quot;)</span>
            <span class="token comment">// sessionStorage.setItem(&quot;address&quot;, &quot;花果山&quot;)</span>

            localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">&quot;name&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">)</span>
            localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">&quot;age&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;18&quot;</span><span class="token punctuation">)</span>
            localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">&quot;gender&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;男&quot;</span><span class="token punctuation">)</span>
            localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">&quot;address&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;花果山&quot;</span><span class="token punctuation">)</span>

            <span class="token comment">// const name = sessionStorage.getItem(&quot;name&quot;)</span>
            <span class="token comment">// console.log(name)</span>

            <span class="token comment">// sessionStorage.removeItem(&quot;name&quot;)</span>
            <span class="token comment">// sessionStorage.clear()</span>

            localStorage<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_4-token" tabindex="-1"><a class="header-anchor" href="#_4-token" aria-hidden="true">#</a> 4.token</h2><blockquote><p>问题： - 现在是登录以后直接将用户信息存储到了localStorage - 主要存在两个问题： 1.数据安全问题 2.服务器不知道你有没有登录（如果服务器没有验证可以直接通过抓取api（接口）来获取数据）</p></blockquote><p><strong>解决问题：</strong></p><p><strong>如何告诉服务器客户端的登录状态</strong></p><ul><li><p><code>rest</code>风格的服务器是<strong>无状态</strong>的服务器，所以注意不要在服务器中存储用户的数据</p></li><li><p>服务器中不能存储用户信息，可以将用户信息发送给客户端保存</p><p>​ 比如：{id:&quot;xxx&quot;, username:&quot;xxx&quot;, email:&quot;xxx&quot;} 客户端每次访问服务器时，直接将用户信息发回，服务器就可以根据用户信息来识别用户的身份</p></li><li><p>但是如果将数据直接发送给客户端同样会有数据安全的问题，所以我们必须对数据进行加密，加密以后在发送给客户端保存，这样即可避免数据的泄露。</p></li><li><p>在node中可以直接使用<code>jsonwebtoken</code>这个包来对数据进行加密，jsonwebtoken（jwt） --&gt; 通过对json加密后，生成一个web中使用的令牌。</p></li><li><p>使用步骤：</p><ol><li>安装 <code>yarn add jsonwebtoken</code></li><li>引入 <code>const jwt = require(&quot;jsonwebtoken&quot;)</code></li><li>.... <code>https://www.npmjs.com/package/jsonwebtoken</code></li></ol></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 引入jwt</span>
<span class="token keyword">const</span> jwt <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;jsonwebtoken&quot;</span><span class="token punctuation">)</span>

<span class="token comment">// 创建一个对象</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;孙悟空&quot;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 使用jwt来对json数据进行加密</span>
<span class="token comment">// expiresIn有效时间 数字1一秒 字符串&quot;1&quot; 一毫秒</span>
<span class="token keyword">const</span> token <span class="token operator">=</span> jwt<span class="token punctuation">.</span><span class="token function">sign</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">&quot;hello&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">expiresIn</span><span class="token operator">:</span> <span class="token string">&quot;1&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>token<span class="token punctuation">)</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
    <span class="token comment">// 服务器收到客户端的token后</span>
    <span class="token comment">// 需要解密查看信息是否正确</span>
    <span class="token keyword">const</span> decodeData <span class="token operator">=</span> jwt<span class="token punctuation">.</span><span class="token function">verify</span><span class="token punctuation">(</span>token<span class="token punctuation">,</span> <span class="token string">&quot;hello&quot;</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>decodeData<span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> 
    <span class="token comment">// 说明token解码失败，说明token无效</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;无效的token&quot;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_5-axios" tabindex="-1"><a class="header-anchor" href="#_5-axios" aria-hidden="true">#</a> 5.Axios</h2><p><code>Axios</code> 是一个基于 <code>*promise*</code> 网络请求库，作用于<a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer"><code>node.js</code><span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 和浏览器中。 它是 <em><strong>isomorphic</strong></em> 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js <code>http</code> 模块, <strong>而在客户端 (浏览端) 则使用 XMLHttpRequests。</strong></p><h3 id="_1-安装" tabindex="-1"><a class="header-anchor" href="#_1-安装" aria-hidden="true">#</a> 1.安装</h3><p>使用 npm:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>$ npm install axios
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>使用 bower:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>$ bower install axios
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>使用 yarn:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>$ yarn add axios
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>使用 jsDelivr CDN:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">&quot;https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>使用 unpkg CDN:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">&quot;https://unpkg.com/axios/dist/axios.min.js&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="_2-使用" tabindex="-1"><a class="header-anchor" href="#_2-使用" aria-hidden="true">#</a> 2.使用</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code> <span class="token comment">// 直接调用axios发送请求</span>
            <span class="token comment">// axios(config)</span>
            <span class="token function">axios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&quot;post&quot;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;http://localhost:3000/students&quot;</span><span class="token punctuation">,</span>
                <span class="token comment">//请求参数</span>
                <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&quot;男&quot;</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">&quot;女儿国&quot;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token comment">// 自动识别</span>
                <span class="token comment">// data:&quot;name=swk&amp;age=18&quot;</span>

            <span class="token punctuation">}</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> 
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;出错了&quot;</span><span class="token punctuation">,</span>err<span class="token punctuation">)</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token comment">// axios.post(&quot;http://localhost:3000&quot;,</span>
            <span class="token comment">//     {</span>
            <span class="token comment">//         name: &quot;孙悟空&quot;</span>
            <span class="token comment">//     }</span>
            <span class="token comment">// )</span>
        <span class="token punctuation">}</span>

         document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">// 直接调用axios发送请求</span>
                <span class="token comment">// axios(config)</span>
                <span class="token function">axios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                    <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&quot;get&quot;</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;http://localhost:3000/students&quot;</span><span class="token punctuation">,</span>

                <span class="token punctuation">}</span><span class="token punctuation">)</span>
                    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                        <span class="token comment">// axios默认只会在响应状态为2xx时才会调用then</span>
                        <span class="token comment">// result是axios封装过的</span>
                        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span>
                    <span class="token punctuation">}</span><span class="token punctuation">)</span>
                    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;出错了&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span>
                    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_3-请求配置" tabindex="-1"><a class="header-anchor" href="#_3-请求配置" aria-hidden="true">#</a> 3.请求配置</h3><blockquote><p>这些是创建请求时可以用的配置选项。只有 <code>url</code> 是必需的。如果没有指定 <code>method</code>，请求将默认使用 <code>GET</code> 方法。</p></blockquote><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// 直接调用axios发送请求</span>
            <span class="token comment">// axios(config)</span>
            <span class="token function">axios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                <span class="token comment">// baseURL 指定服务器的根目录（路径的前缀）</span>
                <span class="token literal-property property">baseURL</span><span class="token operator">:</span> <span class="token string">&quot;http://localhost:3000&quot;</span><span class="token punctuation">,</span>
                <span class="token comment">//请求地址</span>
                <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;/test&quot;</span><span class="token punctuation">,</span>
                <span class="token comment">// 请求方法，默认是get</span>
                <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&quot;get&quot;</span><span class="token punctuation">,</span>
                <span class="token comment">// 指定请求头</span>
                <span class="token comment">// headers: {&quot;Content-type&quot;:&quot;application/json&quot;}</span>
                <span class="token comment">// 仅适用 &#39;PUT&#39;, &#39;POST&#39;, &#39;DELETE 和 &#39;PATCH&#39; 请求方法</span>
                <span class="token comment">// data: &quot;name=唐僧&amp;age=16&quot;,</span>
                <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;唐僧&quot;</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&quot;男&quot;</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">&quot;女儿国&quot;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token comment">// params 用来指定路径中的查询字符串</span>
                <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                    <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;swk&quot;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token comment">// timeout 过期时间</span>
                <span class="token literal-property property">timeout</span><span class="token operator">:</span><span class="token number">1000</span><span class="token punctuation">,</span>

                <span class="token comment">// 用来终止请求 </span>
                <span class="token comment">// signal</span>

                <span class="token comment">//transformRequest 可以用来处理请求数据（data）</span>
                <span class="token comment">//它需要一个数组作为参数，数组可以接收多个函数，请求发送时多个函数会按照顺序执行</span>
                <span class="token comment">// 函数在执行时，会接收到两个参数data和headers</span>
                <span class="token literal-property property">transformRequest</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> headers</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    data<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&quot;孙悟空&quot;</span>
                    headers<span class="token punctuation">[</span><span class="token string">&quot;Content-Type&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">&quot;application/json&quot;</span>
                    <span class="token comment">// console.log(data)</span>
                    <span class="token comment">// console.log(headers)</span>
                    <span class="token keyword">return</span> data
                <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span>headers</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token comment">// 最后一个函数必须返回一个字符串，才能使得数据有效</span>
                    <span class="token comment">// console.log(data)</span>
                    <span class="token comment">// console.log(headers)</span>
                    <span class="token keyword">return</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
                <span class="token punctuation">}</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;出错了&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token comment">// axios.post(&quot;http://localhost:3000&quot;,</span>
            <span class="token comment">//     {</span>
            <span class="token comment">//         name: &quot;孙悟空&quot;</span>
            <span class="token comment">//     }</span>
            <span class="token comment">// )</span>
        <span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_4-响应结构" tabindex="-1"><a class="header-anchor" href="#_4-响应结构" aria-hidden="true">#</a> 4.响应结构</h3><p>一个请求的响应包含以下信息。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
  <span class="token comment">// `data` 由服务器提供的响应</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// `status` 来自服务器响应的 HTTP 状态码</span>
  <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>

  <span class="token comment">// `statusText` 来自服务器响应的 HTTP 状态信息</span>
  <span class="token literal-property property">statusText</span><span class="token operator">:</span> <span class="token string">&#39;OK&#39;</span><span class="token punctuation">,</span>

  <span class="token comment">// `headers` 是服务器响应头</span>
  <span class="token comment">// 所有的 header 名称都是小写，而且可以使用方括号语法访问</span>
  <span class="token comment">// 例如: `response.headers[&#39;content-type&#39;]`</span>
  <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// `config` 是 `axios` 请求的配置信息</span>
  <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// `request` 是生成此响应的请求</span>
  <span class="token comment">// 在node.js中它是最后一个ClientRequest实例 (in redirects)，</span>
  <span class="token comment">// 在浏览器中则是 XMLHttpRequest 实例</span>
  <span class="token literal-property property">request</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_5-默认配置" tabindex="-1"><a class="header-anchor" href="#_5-默认配置" aria-hidden="true">#</a> 5.默认配置</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">&#39;https://api.example.com&#39;</span><span class="token punctuation">;</span>
axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>headers<span class="token punctuation">.</span>common<span class="token punctuation">[</span><span class="token string">&#39;Authorization&#39;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token constant">AUTH_TOKEN</span><span class="token punctuation">;</span>
axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>headers<span class="token punctuation">.</span>post<span class="token punctuation">[</span><span class="token string">&#39;Content-Type&#39;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">&#39;application/x-www-form-urlencoded&#39;</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_6-实例" tabindex="-1"><a class="header-anchor" href="#_6-实例" aria-hidden="true">#</a> 6.实例</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">&quot;http://localhost:3000&quot;</span>
        axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>headers<span class="token punctuation">.</span>common<span class="token punctuation">[</span><span class="token string">&quot;Authorization&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Bearer </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">&quot;token&quot;</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
        <span class="token comment">// axios实例相当于是axios的一个副本，它的功能和axios一样</span>
        <span class="token comment">// axios的默认配置是在实例也同样会生效</span>
        <span class="token comment">// 但是我可以单独修改axios实例的默认配置</span>
        
        <span class="token keyword">const</span> instance <span class="token operator">=</span> axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        instance<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">&quot;baseURL:http://localhost:4000&quot;</span>


        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            instance
            <span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;students&quot;</span><span class="token punctuation">)</span>
            <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span>
            <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;出错了&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_7-拦截器" tabindex="-1"><a class="header-anchor" href="#_7-拦截器" aria-hidden="true">#</a> 7.拦截器</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">&quot;http://localhost:3000&quot;</span>

        <span class="token comment">// axios的拦截器可以对请求或响应进行拦截，在请求发送前和响应读取前处理数据</span>
        <span class="token comment">// 添加请求拦截器</span>
        axios<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;拦截器执行了&quot;</span><span class="token punctuation">)</span>
            <span class="token comment">// config 表示axios中的配置对象</span>
            <span class="token comment">// console.log(config)</span>
            config<span class="token punctuation">.</span>data<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&quot;著哈哈&quot;</span>
            <span class="token comment">// config.headers[&quot;Authorization&quot;] = `Bearer ${localStorage.getItem(&quot;token&quot;)}`</span>
            <span class="token comment">// 在发送请求之前做些什么</span>
            <span class="token keyword">return</span> config<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// 对请求错误做些什么</span>
            <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        axios<span class="token punctuation">.</span>interceptors
        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;btn1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// axios</span>
            <span class="token comment">//     .post(&quot;students&quot;, { name: &quot;猪八戒&quot; })</span>
            <span class="token function">axios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;students&quot;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&quot;post&quot;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;猪八戒&quot;</span> <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;出错了&quot;</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你稍后需要移除拦截器，可以这样：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> myInterceptor <span class="token operator">=</span> axios<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">/*...*/</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
axios<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">eject</span><span class="token punctuation">(</span>myInterceptor<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>You can also clear all interceptors for <strong>requests</strong> or <strong>responses</strong>.</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> instance <span class="token operator">=</span> axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
instance<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">/*...*/</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
instance<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Removes interceptors from requests</span>
instance<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">/*...*/</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
instance<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Removes interceptors from responses</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></div><footer class="page-meta"><div class="meta-item edit-link"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M2 26h28v2H2z" fill="currentColor"></path><path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Edit this page<!--]--></span></span></div><div class="meta-item last-updated"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Last Updated 2023/6/11 11:16:26<!--]--></span></span></div></footer><!----><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">ON THIS PAGE</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_1-为什么使用rest风格" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.为什么使用REST风格"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.为什么使用REST风格<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_1-rest" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.REST"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.REST<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_2-接口是什么" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.接口是什么"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.接口是什么<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_3-接口的组成" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="3.接口的组成"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->3.接口的组成<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_4-restful-api" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="4.RESTful API"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->4.RESTful API<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_5-json-server" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="5.json-server"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->5.json-server<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_2-ajax" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.AJAX"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.AJAX<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_1-cors" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.CORS（）"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.CORS（）<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_2-xhr的使用" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.xhr的使用"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.xhr的使用<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_3-fetch的使用" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="3.fetch的使用"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->3.fetch的使用<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_3-本地存储" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="3.本地存储"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->3.本地存储<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_4-token" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="4.token"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->4.token<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_5-axios" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="5.Axios"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->5.Axios<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_1-安装" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.安装"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.安装<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_2-使用" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.使用"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.使用<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_3-请求配置" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="3.请求配置"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->3.请求配置<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_4-响应结构" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="4.响应结构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->4.响应结构<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_5-默认配置" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="5.默认配置"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->5.默认配置<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_6-实例" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="6.实例"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->6.实例<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/RESTheAJAX.html#_7-拦截器" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="7.拦截器"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->7.拦截器<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/assets/app-5e55c3a9.js" defer></script>
  </body>
</html>
